<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-content">
      <view class="tabs-section">
        <u-tabs
          ref="uTabs"
          :list="tabList"
          :current="current"
          active-color="#00ACF0"
          item-width="25%"
          @change="tabsChange"
        ></u-tabs>
      </view>
      <view class="list-section">
        <view class="list-item" v-for="(item, index) in listData" :key="index">
          <view class="coupon-top">
            <view class="coupon-name">
              <image :src="item.store.logo" />
              <view class="coupon-summary">
                <view>{{ item.name }}</view>
                <view v-if="item.expire_type == 1"
                  >{{ item.expire_day }}{{ $t('facePay.overdue') }}</view
                >
                <view v-else
                  >{{ item.begin_time | subStrTime }}-{{
                    item.end_time | subStrTime
                  }}</view
                >
              </view>
            </view>
            <view class="coupon-price">
              <view>
                <text>￥</text>
                <text>{{ item.sub_price }}</text>
              </view>
              <view>{{ item.min_price_desc }}</view>
            </view>
          </view>
          <view class="coupon-down">
            <view class="coupon-down-info">
              <view class="coupon-fold" @click.stop="clickItem(index)">
                <text>{{ $t('facePay.detail') }}</text>
                <view class="bottom_arrows"></view>
              </view>
              <view class="has-select-coupon">
                <view class="btn-groups">
                  <view
                    class="share-btn"
                    v-if="item.is_use == 0 && item.is_expire == 0"
                    >{{ $t('facePay.increase') }}
                    <button open-type="share" :data-item="item"></button>
                  </view>
                  <view
                    class="use-btn"
                    v-if="item.is_use == 0"
                    @click="gotoUse(item)"
                    >{{ $t('facePay.toUse') }}</view
                  >
                </view>
              </view>
            </view>
            <view
              class="coupon-summary"
              v-show="showCouponSummary && handleItem == index"
            >
              <view> {{ item.content }}</view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="more-coupon"
        @click="$utils.toUrl('/face-pay/face-pay/storeCoupon')"
      >
        {{ $t('facePay.more') }} >
      </view>
    </view>
    <operatePopup
      :showPopup="showOperatePopup"
      :couponItem="couponItem"
      @handleCancle="showOperatePopup = !showOperatePopup"
    ></operatePopup>
    <givePopup :showPopup="showGivePopup" :coupon_id="coupon_id"></givePopup>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import operatePopup from '../components/face-pay/operatePopup.vue';
import givePopup from '../components/face-pay/givePopup.vue';

export default {
  components: {
    Shenhe,

    operatePopup,
    givePopup,
  },
  data() {
    return {
      listData: [],
      tabList: [
        {
          name: this.$t('person.cashStatus1'),
          status: -1,
        },
        {
          name: this.$t('coupon.noUse'),
          status: 0,
        },
        {
          name: this.$t('coupon.used'),
          status: 1,
        },
        {
          name: this.$t('facePay.turnCoupon'),
          status: 3,
        },
      ], //  全部-1 未使用0 已使用1 已过期2 转赠3
      current: 0,
      showCouponSummary: false,
      handleItem: -1,
      status: -1,
      userInfo: {},
      showGivePopup: false, // 转赠弹框
      showOperatePopup: false, // 操作弹窗
      couponItem: {},
      coupon_id: '',
    };
  },
  onLoad(t) {
    let userInfo = uni.getStorageSync('userInfo');
    this.userInfo = userInfo;
    // 如果路由中有user_id参数，且和当前用户不一致，则展示转赠弹框
    if (t.user_id && t.user_id != userInfo.id) {
      this.coupon_id = t.coupon_id;
      this.showGivePopup = true;
    }
  },
  onShow() {
    this.myCouponList();
  },
  filters: {
    subStrTime(str) {
      let arr = str.split(' ');
      if (arr.length > 1) {
        return arr[0];
      } else {
        return arr[0];
      }
    },
  },
  // 分享小程序
  onShareAppMessage(res) {
		const storeId = uni.getStorageSync("store_id");
    let params = '';
    if (res.from === 'button') {
      // 来自页面内分享按钮
      if (res.target.dataset?.item) {
        let item = res.target.dataset.item;
        params = `coupon_id=${item.id}&user_id=${this.userInfo.id}&`;
      }
    }
    return {
      title: this.$t('facePay.share'),
      path: `/face-pay/face-pay/myCoupons?${params}store_id=${storeId}`,
    };
  },
  methods: {
    // 切换tab
    tabsChange(e) {
      this.current = e;
      this.status = this.tabList[e].status;
      this.myCouponList({ status: this.status });
    },
    // 获取优惠券列表
    myCouponList(params = {}) {
      uni.showLoading({
        title: this.$t('facePay.requesting'),
      });
      this.$allrequest.facePay
        .myCouponList(params)
        .then(res => {
          if (!res.code && res.data) {
            this.listData = res.data.list;
            uni.hideLoading();
          } else {
            uni.showToast({
              title: res.msg,
              duration: 2000,
              mask: true,
              icon: 'none',
            });
          }
        })
        .catch(err => {
          uni.showToast({
            title: this.$t('facePay.requestFail'),
            duration: 2000,
            mask: true,
            icon: 'none',
          });
        });
    },
    // 点击了优惠券详情
    clickItem(e) {
      this.handleItem = e;
      this.showCouponSummary = !this.showCouponSummary;
    },
    // 点击去使用按钮
    gotoUse(item) {
      // 如果当前storeID和优惠券storeID一致，则跳转到首页；如果不一致，则显示操作弹窗，跳转小程序或者导航到店
      this.couponItem = item;
      if (item.store_id != '1') {
        this.$utils.toUrl('/pages/home/home', 'switchtab');
      } else {
        this.showOperatePopup = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f2f2;

  .page-content {
    width: 100%;
    padding-bottom: 100rpx;
    .tabs-section {
      width: 100%;
      height: 90rpx;
    }
    .list-section {
      width: 100%;
      padding: 24rpx;

      .list-item {
        width: 702rpx;
        min-height: 226rpx;
        background: #ffffff;
        border-radius: 24rpx;
        margin-bottom: 24rpx;

        .coupon-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 35rpx 45rpx 30rpx 30rpx;
          border-bottom: 2rpx dashed #eeeeee;

          .coupon-name {
            display: flex;
            align-content: center;
            line-height: 44rpx;
            font-family: PingFang SC;
            image {
              width: 80rpx;
              height: 80rpx;
              background: #f2f2f2;
              border-radius: 10rpx;
              margin-right: 24rpx;
            }
            .coupon-summary {
              view:nth-child(1) {
                font-size: 32rpx;
                font-weight: 500;
                color: #262626;
                line-height: 1;
                margin-bottom: 24rpx;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                max-width: 330rpx;
              }
              view:nth-child(2) {
                font-size: 22rpx;
                font-weight: 400;
                color: #8c8c8c;
                line-height: 1;
              }
            }
          }

          .coupon-price {
            text-align: right;

            view:nth-child(1) {
              color: #f7271f;
              font-family: PingFang SC;
              font-weight: 500;
              display: flex;
              align-items: baseline;
              justify-content: flex-end;
              font-size: 56rpx;
              margin-bottom: 12rpx;
              line-height: 1;

              text:first-child {
                font-size: 28rpx;
              }
            }

            view:nth-child(2) {
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              line-height: 1;
            }
          }
        }

        .coupon-down {
          padding: 24rpx 46rpx 30rpx 35rpx;
          .coupon-down-info {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .coupon-fold {
              display: flex;
              align-items: center;
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              line-height: 44rpx;

              .bottom_arrows {
                width: 16rpx;
                height: 16rpx;
                border-top: 1rpx solid #c3c8d6;
                border-right: 1rpx solid #c3c8d6;
                transform: rotate(135deg) translateY(6rpx);
                margin-left: 20rpx;
              }
            }

            .has-select-coupon {
              .btn-groups {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                view {
                  width: 120rpx;
                  height: 48rpx;
                  font-size: 24rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  line-height: 48rpx;
                  text-align: center;
                  border-radius: 24rpx;
                }
                .use-btn {
                  background: #ff4b33;
                  color: #ffffff;
                  margin-left: 24rpx;
                }

                .share-btn {
                  background: #ffffff;
                  border: 2rpx solid #999999;
                  color: #191919;
                  position: relative;
                  button {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 11;
                    opacity: 0;
                  }
                }
              }
            }
          }

          .coupon-summary {
            padding-top: 20rpx;
            view {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              margin-bottom: 20rpx;
            }
            view:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }

    .more-coupon {
      width: 100%;
      height: 100rpx;
      background: #ffffff;
      box-shadow: 0 1rpx 3rpx 0 rgba(238, 238, 238, 0.5);
      border-radius: 24rpx 24rpx 0 0;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 11;
      font-size: 30rpx;
      font-weight: 400;
      color: #262626;
      text-align: center;
      line-height: 100rpx;
    }
  }
}
</style>
